<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue.set()的使用</title>
  <script src="../js/vue.js"></script>
</head>

<body>
  <div id="root">
    <button @click="addSex">添加性别</button>
    姓名:<h1>{{student.name}}</h1>
    年龄:<h1>{{student.age}}</h1>
    性别<h1 v-if="student.sex">{{student.sex}}</h1>
  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false;

  new Vue({
    el: '#root',
    data: {
      student: { id: "001", name: "周杰伦", age: 22 }
    },
    methods:{
      addSex(){
        Vue.set(this.student,'sex','男')
      }
    }
  })
</script>

</html